<template>
  <div>
    <Pane>
      <span slot="title">修改密码</span>
      <section slot="content">
        <el-form :model="pwdData" ref="pwdFormRef">
          <el-form-item>
            <el-row>
              <el-col :span="2">
                <span>原密码</span>
              </el-col>
              <el-col :span="6">
                <el-input v-model="pwdData.oldPwd" @blur="checkPwd" />
              </el-col>
              <el-col :span="6">
                <span v-if="msg==='旧密码正确'" style="color:#67C23A; margin-left:20px;">{{msg}}</span>
                <span v-else style="color:#F56C6C; margin-left:20px;">{{msg}}</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="2">
                <span>新密码</span>
              </el-col>
              <el-col :span="6">
                <el-input v-model="pwdData.newPwd" />
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="2">
                <span>确认新密码</span>
              </el-col>
              <el-col :span="6">
                <el-input v-model="pwdData.confirmNewPwd" @blur="confrimPwd" />
              </el-col>
              <el-col :span="6">
                <span
                  v-if="confirmMsg==='两次密码一致'"
                  style="color:#67C23A; margin-left:20px;"
                >{{confirmMsg}}</span>
                <span v-else style="color:#F56C6C; margin-left:20px;">{{confirmMsg}}</span>
              </el-col>
            </el-row>
          </el-form-item>
          <el-form-item>
            <el-row>
              <el-col :span="3">
                <el-button size="mini" type="primary" @click="savePwd">确定</el-button>
                <el-button size="mini" @click="resetPwd">重置</el-button>
              </el-col>
            </el-row>
          </el-form-item>
        </el-form>
      </section>
    </Pane>
  </div>
</template>

<script>
import Pane from '@/components/Pane/Pane.vue'
import { checkOldPwd, updatePwd } from '@/api/account.js'

export default {
  name: 'PassModify',
  props: {},
  data() {
    return {
      pwdData: {
        oldPwd: '',
        newPwd: '',
        confirmNewPwd: ''
      },
      msg: '',
      confirmMsg: ''
    }
  },
  methods: {
    resetPwd() {
      this.pwdData = {
        oldPwd: '',
        newPwd: '',
        confirmNewPwd: ''
      }
      // console.log(this.$refs.pwdFormRef)
      // this.$refs.loginFormRef.resetFields()
    },
    async savePwd() {
      if (this.msg === '旧密码正确' && this.confirmMsg === '两次密码一致') {
        // 发送修改密码请求
        const { code } = await updatePwd({
          newPwd: this.pwdData.newPwd
        })
        // console.log(code)
        if (code === 0) {
          this.$router.push('/login')
        }
      }
    },
    async checkPwd() {
      // console.log(1)
      // 验证旧密码是否正确
      const { msg } = await checkOldPwd({
        oldPwd: this.pwdData.oldPwd
      })
      this.msg = msg
      // console.log(code, msg)
    },
    confrimPwd() {
      if (this.pwdData.newPwd.trim() === this.pwdData.confirmNewPwd.trim()) {
        this.confirmMsg = '两次密码一致'
      } else {
        this.confirmMsg = '两次密码不一致'
      }
    }
  },
  components: {
    Pane
  }
}
</script>

<style scoped >
</style>
